<template>
  <div class="catelog-detail">
    <el-row :gutter="20">
      <el-col :span="18">
        <blank-box :title="catelogExhibitionTitle">
          <template #content>
            <el-empty v-if="dramas.length === 0" description="暂无内容"></el-empty>
            <el-row :gutter="20">
              <el-col :span="4" v-for="drama in dramas" :key="drama.id">
                <resource-cover :drama="drama"></resource-cover>
              </el-col>
            </el-row>
          </template>
        </blank-box>
      </el-col>
      <el-col :span="6">
        <blank-box title="清单信息">
          <template #content>
            <div class="catelogInfo">
              <div class="cover">
                <el-image style="max-height: 400px" :src="catelog.cover | filterImg" fit="fill">
                </el-image>
              </div>
              <h3 class="title" v-text="catelog.title"></h3>
              <p class="creator">由 {{ catelogUser.username }} 创建</p>
              <p class="desc">简介：{{ catelog.description }}</p>
              <p class="createTime">创建时间：{{ catelog.createTime }}</p>
              <template v-if="!isMyCatelog">
                <el-button v-if="!collected" @click="collectCatelog" type="primary" size="small">收藏该清单</el-button>
                <el-button v-else type="primary" @click="cancelCollected" plain size="small">已收藏</el-button>
              </template>
            </div>
          </template>
        </blank-box>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import BlankBox from "../../components/BlankBox";
import {getCatelogDramaInfo} from "../../api/catelog-drama-items";
import ResourceCover from "../../components/ResourceCover";
import {cancelCollected, collectCatelog, collectedState} from "../../api/catelog-collected";

export default {
  name: "detail",
  components: {ResourceCover, BlankBox},
  created() {
    this.getDetailInfo()
  },
  data() {
    return {
      catelogId: this.$route.params.id,
      catelog: Object,
      dramas: [],
      catelogUser: Object,
      collected: false
    }
  },
  methods: {
    getDetailInfo() {
      getCatelogDramaInfo(this.catelogId).then(res => {
        let data = res.data.data
        this.catelog = data.catelog
        this.dramas = data.dramas
        this.catelogUser = data.user
        if (this.user) {
          this.getCollectState()
        }
      })
    },
    getCollectState() {
      collectedState(this.catelogCollectVo).then(res => {
        let data = res.data
        if (data.data != null) {
          this.collected = true
        }
      })
      return undefined
    },
    collectCatelog() {
      collectCatelog(this.catelogCollectVo).then(res => {
        let data = res.data
        this.collected = true
        this.$message.success(data.message)
      })
    },
    cancelCollected() {
      cancelCollected(this.catelogCollectVo).then(res => {
        let data = res.data
        this.collected = false
        this.$message.success(data.message)
      })
    }
  },
  computed: {
    user() {
      return this.$store.getters.user
    },
    catelogExhibitionTitle() {
      return this.catelogUser.username + ` 的 "` + this.catelog.title + `" 清单`
    },
    catelogCollectVo() {
      return {
        catelogId: this.catelogId,
        userId: this.user.id
      }
    },
    isMyCatelog() {
      if (!this.user)
        return false;
      return this.$store.getters.user.id == this.catelog.userId
    }
  }
}
</script>

<style scoped>
.catelog-detail {
  /*min-height: 50vh;*/
}

.catelogInfo {
  text-align: center;
  font-size: 14px;
  color: #bbbbbb;
}

.catelogInfo .cover {
  text-align: center;
}

.catelogInfo .title, .catelogInfo .creator, .catelogInfo .desc {
  text-align: center;
}

.catelogInfo .creator, .catelogInfo .desc {
  font-size: 14px;
  color: #bbbbbb;
}
</style>
